import { Component } from '@tarojs/taro'
import { Block, Image, Input, Text, Textarea, View } from "@tarojs/components";
import './index.scss'

/**
 * 单元格列表
 * @author zeng
 * @date   2020/5/21 10:49
 */
export default class GCellList extends Component {
  static options = {
    addGlobalClass: true
  }
  static defaultProps = {
    arrow: 'left',
    onClick: () => {},
    data: []
  }

  renderRightBox = (cell, { arrow }) => {
    if (cell.isTextArea) return null
    let main = null
    if (cell.extra) {
      if (cell.isInput) {
        main = (
          <Input
            value={cell.extra.label}
            placeholder={cell.extra.placeholder}
            className='g-cell-extra--label'
            placeholderClass='g-cell-extra--label'
          />
        )
      } else if (cell.isSex) {
        main = (
          <View/>
        )
      } else if (cell.extra.label) {
        main = <Text className='g-cell-extra g-cell-extra--label'>{cell.extra.label}</Text>
      }
    }
    return (
      <View className='g-cell-right flex-row'>
        {
          cell.extra && (
            <Block>
              {main}
              {
                cell.extra.avatar && (
                  <Image src={cell.extra.avatar} className='g-cell-extra g-cell-extra--avatar' />
                )
              }
            </Block>
          )
        }
        {
          (cell.arrow || arrow) && <Text className={`iconfont icon-iconfont-${cell.arrow || arrow}`} />
        }
      </View>
    )
  }

  render () {
    const { data, type, arrow, onClick } = this.props
    return (
      <View className='g-cell-list'>
        {
          data.map((cell, index) => {
            const isTextArea = cell.isTextArea
            return (
              <View className={`${isTextArea ? 'flex-col' : 'flex-row'}`} onClick={() => onClick(cell, index)} key={cell.value + ''}>
                <View className='g-cell flex-row' style={isTextArea ? { borderBottomWidth: 0 } : {}}>
                  {/* 右边 icon */}
                  {
                    type === 'rank' ? (
                      <View className='g-cell-left flex-row flex-center'>
                        <Text className='g-cell-rank-label'>{index + 1}</Text>
                      </View>
                    ) : (
                      cell.icon && (
                        <View className='g-cell-left flex-row flex-center'>
                          <Image className='g-cell-icon' src={cell.icon} />
                        </View>
                      )
                    )
                  }
                  {/* 主体内容 */}
                  <View className='g-cell-main flex-col'>
                    {
                      cell.title && <Text className='g-cell-title'>{cell.title}</Text>
                    }
                    {
                      cell.subtitle && <Text className='g-cell-subtitle'>{cell.subtitle}</Text>
                    }
                  </View>
                  {/* 右边内容 */}
                  {this.renderRightBox(cell, { arrow })}
                </View>
                {
                  isTextArea && (
                    <Textarea
                      value={cell.extra.label}
                      placeholder={cell.extra.placeholder}
                      style={{ textAlign: "left" }}
                      className='g-cell-extra--label g-cell-textarea'
                      placeholderClass='g-cell-extra--label'
                    />
                  )
                }
              </View>
            )
          })
        }
      </View>
    )
  }
}
